<template>
	<view class="page">
		<view class="safe" style="width: 100%;background-color:#f6f7fc" :style="{height:safe+'rpx'}"></view>
		<view class="topTitle">
			<text>我的</text>
		</view>
		<view class="center">
			<view class="content">
				
				<image class="avater" :src="hasUserInfo? userInfo.avatarUrl :'../../static/moren.png'" mode=""></image>
				<text v-if="hasUserInfo" class="name">{{userInfo.nickName}} </text>
				<text v-else class="name"> ID: {{id}}</text>
				<block v-if="!hasUserInfo">
					<button v-if="canIUseGetUserProfile" @click="getUserProfile">
						<u-icon name="weixin-fill" color="#fff" size="32"></u-icon>
						<text style="margin-left: 10rpx;">微信账号一键登录</text>
					</button>
					<button v-else open-type="getUserInfo" @getuserinfo="getUserInfo">
						<u-icon name="weixin-fill" color="#fff" size="32"></u-icon>
						<text style="margin-left: 10rpx;">微信账号一键登录</text>
					</button>
				</block>

				<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="getphonenumber">
					<u-icon name="weixin-fill" color="#fff" size="32"></u-icon>
					<text style="margin-left: 10rpx;">微信账号一键登录</text>
				</button> -->
			</view>
		</view>
		<view class="listItem" v-for="(item ,index) in applyList" :key='index' @click="handelChoose(item)">
			<view class="picTxt">
				<image class="pic" :src="item.src" mode="widthFix"></image>
				<text>{{item.text}}</text>
			</view>
			<u-icon name="arrow-right" color="#ccc" size="28"></u-icon>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				hasUserInfo: false,
				canIUseGetUserProfile: false,
				safe: this.globalData.safeH * 2,
				id: 4329443,
				applyList: [{
					text: '联系客服',
					url: '../enter/link',
                    src:'../../static/link.png'
				}, {
					text: '关于我们',
					url: '../enter/about',
                    src:'../../static/us.png'
				}, {
					text: '订单记录',
					url: '../enter/order',
                    src:'../../static/order.png'
				},{
					text: '我的地址',
					url: '../enter/addressList',
                    src:'../../static/address.png'
				}],
				userInfo:uni.getStorageSync('userinfo')||'',
				auth: false,
				tel: ''
			}

		},
		computed: {


		},
		onShow() {

		},
		onLoad() {
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
			if (this.userInfo) {
				this.hasUserInfo = true
			}
		},
		methods: {
			getUserProfile(e) {
				let that = this
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						that.userInfo = res.userInfo
						that.hasUserInfo = true
						uni.setStorage({
							key: 'userinfo',
							data: that.userInfo
						})
						that.login()
					}
				})
			},
			getUserInfo() {
				console.log(111)
				let _this = this
				wx.get
				uni.getUserInfo({
					success: function(res) {
						console.log(res)
						_this.userInfo = res.userInfo
						_this.hasUserInfo = true
						uni.setStorage({
							key: 'userinfo',
							data: _this.userInfo
						})
						_this.login()
					}
				})
			},
			login() {
				let _this = this
				uni.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							uni.request({
								url: 'http://47.100.60.48:17000/renren-fast/wx_user/login?jsCode=' + res.code, //
								// url:'http://td.yz.com/api/user/login',
								header: {
									'content-type': 'application/x-www-form-urlencoded'
								},
								method: "POST",
								data: {
									// jsCode: res.code,
								},
								success: (res) => {
									console.log(res.data)
									if (res.data.code !== 0) {
										uni.showToast({
											title: '登陆失败',
											icon: 'none'
										})
										return
									}
									uni.showToast({
										title: '登录成功',
										icon: 'success'
									})
									setTimeout(function() {
										uni.switchTab({
											url: './index'
										})
									}, 1000)
                                    _this.$http.post('/wx_user/addNikeName?nikeName='+ _this.userInfo.nickName).then(res=>{
                                        
                                    })
									uni.setStorage({
										key: 'token',
										data: res.data.token,
									});

								}
							});
							// _this.$http.post('wx_user/login?jsCode='+res.code).then(res=>{
							// 	console.log(res)
							// })
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			getphonenumber() {
				uni.getphonenumber({
					success: function(res) {
						console.log(res)
					}
				})
			},
			handelChoose(item) {
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}
</script>



<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
		background-color: #fff;

		.topTitle {
			width: 100%;
			height: 90rpx;
			background-color: #f6f7fc;
			font-size: 32rpx;
			line-height: 80rpx;
			padding-left: 20rpx;
			// font-weight: bold;

		}


		.center {
			width: 100%;
			height: 400rpx;
			background-color: #f6f7fc;
			position: relative;

			.content {
				width: 400rpx;
				height: 260rpx;

				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
			}

			.avater {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				// background-color: #19BE6B;
				margin: 20rpx;

			}

			.name {
				font-size: 24rpx;
				color: #999;
			}

			button {
				width: 360rpx;
				height: 60rpx;
				background-color: #18B566;
				border-radius: 50rpx;
				margin-top: 30rpx;
				color: #fff;
				font-size: 30rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}

		.listItem {
			width: 100%;
			height: 80rpx;

			border-bottom: 2rpx solid #ccc;
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.picTxt {
				width: 180rpx;

				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.pic {
					width: 40rpx;
					height: 40rpx;
					// background-color: #18B566;
				}
			}
		}
	}
</style>
